<template>
  <section class='f-account'>
    <ul class="f-cell-box">
      <li class="f-cell f-no-radius-bottom" @click="pageJump('/changePhone')">
        <div class="g-flex-ct">
          <p class="f-ml-05">更换手机号码</p>
        </div>
        <img style="width: 6px;height: 10px;" src="@/assets/icons/more_btn_enter.png" alt="">
      </li>
      <li class="f-cell f-mb-16 f-no-radius-top" @click="pageJump('/changePassword')">
        <div class="g-flex-ct">
          <p class="f-ml-05">修改登录密码</p>
        </div>
        <img style="width: 6px;height: 10px;" src="@/assets/icons/more_btn_enter.png" alt="">
      </li>

      <li class="f-cell f-mb-16" @click="showBottom = true">
        <div class="g-flex-ct">
          <p class="f-ml-05">账号注销</p>
        </div>
        <img style="width: 6px;height: 10px;" src="@/assets/icons/more_btn_enter.png" alt="">
      </li>
    </ul>

    <van-popup class="f-popup-tips" v-model:show="showBottom" position="bottom" round>
      <img src="@/assets/icons/popup_icon_remind.png" alt="">
      <p class="f-p1">是否确定将账号注销？</p>
      <p class="f-p2">账号注销后，您的账户数据将无法恢复</p>
      <div class="f-flex-between">
        <van-button class="f-btn" block round size="small" @click="showBottom = false">取消</van-button>
        <van-button class="f-btn f-ml-30" block type="primary" round size="small" @click="handleLogOff()">确定</van-button>
      </div>
    </van-popup>
  </section>
</template>
  
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from './api'
import { successDeal, getStore, removeStore } from '@/utils/utils';
import { showDialog } from 'vant';
import hexMD5 from "@/utils/md5.min.js"

export default {
  setup(props, context) {

    const store = useStore()
    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      showBottom: false,
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '账号与安全',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightText: '',
      });
    })

    const pageJump = (path) => {
      router.push({
        path,
      })
    }

    const handleLogOff = () => {
      api.logOff().then(res => {
        removeStore('USER_ACCONT')
        removeStore('USER_INFO')

        showDialog({
          title: '提示',
          message: '账号注销成功！',
        }).then(() => {
          router.replace('/')
        });
      })
    }

    return {
      ...toRefs(state),
      pageJump,
      handleLogOff
    }
  }
}
</script>
  
<style lang='scss' scoped>
.f-account {
  .f-cell-box {
    margin: 20px 14px;
    .f-cell {
      position: relative;
      padding: 18px 11px;
      background: #ffffff;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
    }
    .f-mb-16 {
      margin-bottom: 16px;
    }
    .f-no-radius-bottom {
      border-radius: 7px 7px 0 0;
    }
    .f-no-radius-bottom::before {
      content: "";
      width: 94%;
      height: 1px;
      background: rgba(170, 170, 170, 0.2);
      position: absolute;
      bottom: 0;
      left: 2%;
    }
    .f-no-radius-top {
      border-radius: 0 0 7px 7px;
    }
  }
  .f-popup-tips {
    font-weight: 400;
    padding: 53px 43px 42px 44px;
    text-align: center;
    img {
      width: 43px;
    }
    .f-p1 {
      font-size: 16px;
      color: #000000;
    }
    .f-p2 {
      font-size: 14px;
      color: #ff4d4d;
      margin: 24px 0 40px 0;
      line-height: 20px;
    }
    .f-btn {
      padding: 17px 40px;
    }
  }
}
</style>